HCL Notes and Domino Application Development wiki: 日本語 - Japanese: XPages における OneUI 情報

XPages における OneUI 情報

Added by ~Anita Bregeromanli | Edited by ~Justin Elwemarynds on June 21, 2012 | Version 5

Actions ▼

Abstract

Abstract

XPages における OneUI の解説です。

Tags: XPages, OneUI, 九州地区ノーツパートナー会

ShowTable of Contents

HideTable of Contents

1 OneUIとは？
2 概要
3 デザイン見本
4 適用方法
5 まとめ
6 参考にしたサイトなど
7 その他

OneUIとは？

IBM Lotus User Interface。
XPagesとの相性が非常に良いCSSフレームワークのこと。
使用することでWeb2.0の様なページを作成することが可能となる。
また、CSSを自作するより時間がかからない、スタイルが統一されることで見栄えも良くなるなどのメリットがある。
※ブラウザによって見え方が若干異なる。

OneUIを利用するメリット
1. 多くのLotus製品にも採用されているのでアプリケーション間の親和性が高くなる。
2. OneUIの実装方法と利用のための少しの知識があれば実現できる。
3. クライアントベースのアプリケーションのUIとルックアンドフィールが似ている。
4. 開発効率が飛躍的に向上。

概要

Lotus Notes/Domino 8.5.3で使用出来るOneUIのバージョンは3種類、テーマは全17種類ある。

バージョン	テーマ
OneUI v1.x	oneui
OneUI v2.01	oneuiv2 oneuiv2_gold oneuiv2_green oneuiv2_metal oneuiv2_red
OneUI v2.1	oneuiv2.1 oneuiv2.1_blue oneuiv2.1_gold oneuiv2.1_green oneuiv2.1_onyx oneuiv2.1_orange oneuiv2.1_pink oneuiv2.1_purple oneuiv2.1_red oneuiv2.1_silver oneuiv2.1_gen1

デザイン見本

oneui

oneuiv2

oneuiv2_gold

oneuiv2_green

oneuiv2_metal

oneuiv2_red

oneuiv2.1

oneuiv2.1_blue

oneuiv2.1_gold

oneuiv2.1_green

oneuiv2.1_onyx

oneuiv2.1_orange

oneuiv2.1_pink

oneuiv2.1_purple

oneuiv2.1_red

oneuiv2.1_silver

oneuiv2.1_gen1

適用方法

OneUIを使用するには、テーマの設定、コントロールへスタイルを適用する必要がある。

1. テーマの設定
アプリケーションナビゲータから[アプリケーションのプロパティ]を開く。
[XPage]タブを選択して、[アプリケーションのテーマ]に適用したいテーマ名を入力する。

2. コントロールへスタイルを適用する
パネルコントロール、またはHTML div要素に対してスタイルを適用する。
適用する際、以下に示す階層で配置する。
配置がずれた場合、アウトラインビューで調整する。

スタイルクラスの適用階層

 ＋ lotusFrame

 ├＋ lotusBanner

 │└＋ lotusRightCorner

 │   └ lotusInner

 ├＋ lotusTitleBar

 │└＋ lotusRightCorner

 │   └ lotusInner

 ├ lotusPlaceBar

 │└＋ lotusRightCorner

 │   └ lotusInner

 ├＋ lotusMain

 │├＋ lotusColLeft

 ││└＋ lotusMenu

 ││   └＋ lotusBottomCorner

 ││      └ lotusInner

 │├ lotusColRight

 │└＋ lotusContent

 │   └＋ lotusHeader

 └ lotusFooter

スタイルクラスの適用サンプルソースコード

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

  <xp:panel styleClass="lotusFrame" id="frame">

    <xp:panel styleClass="lotusBanner" id="banner">

      <xp:panel styleClass="lotusRightCorner" id="rightCorner">

        <xp:panel styleClass="lotusInner" id="inner">

          <xp:panel id="logo" styleClass="lotusLogo" style="background-image: none;">

            <xp:image url="/lotus.gif" id="logoImage"></xp:image>

          </xp:panel>

          <ul class="lotusInlinelist lotusUtility">

            <li class="lotusFirst">First List Item</li>

            <li><a href="#">Second List Item</a></li>

          </ul>

          <ul class="lotusInlinelist lotusLinks">

            <li class="lotusFirst lotusSelected">

              <a><strong>Home</strong></a>

            </li>

            <li><a>Application One</a></li>

            <li><a>Application Two</a></li>

            <li><a>Application Three</a></li>

          </ul>

        </xp:panel>

      </xp:panel>

    </xp:panel>

    <xp:panel styleClass="lotusTitleBar" id="title">

      <xp:panel id="rightCorner2" styleClass="lotusRightCorner">

        <xp:panel styleClass="lotusInner" id="inner2">

          <ul class="lotusTabs">

            <li><a>Tab One</a></li>

            <li class="lotusSelected">

              <a><strong>Tab Two</strong></a>

            </li>

            <li><a>Tab Three</a></li>

          </ul>

        </xp:panel>

      </xp:panel>

    </xp:panel>

    <xp:panel styleClass="lotusPlaceBar" id="place">

      <xp:panel id="rightCorner3">

        <xp:panel id="inner3">

          <h2 style="margin:0px">PlaceBar Here</h2>

        </xp:panel>

      </xp:panel>

    </xp:panel>

    <xp:panel styleClass="lotusMain" id="main">

      <xp:panel styleClass="lotusColLeft" id="colLeft">

        <xp:panel styleClass="lotusMenu" id="menu">

          <xp:panel id="bottomCorner" styleClass="lotusBottomCorner">

            <xp:panel styleClass="lotusInner" id="inner4">

              <ul>

                <li><a>Menu Item</a></li>

                  <a><strong>Menu Item</strong></a>

                <li class="lotusSelected">

                </li>

                <li><a>Menu Item</a></li>

              </ul>

            </xp:panel>

          </xp:panel>

        </xp:panel>

      </xp:panel>

      <xp:panel styleClass="lotusColRight" id="colRight">

        <xp:label id="label1" value="Right sidebar Contents Here"></xp:label>

      </xp:panel>

      <xp:panel styleClass="lotusContent" id="content">

        <xp:panel id="header" styleClass="lotusHeader">

          <h1 style="margin:0px">Main Content Here</h1>

        </xp:panel>

      </xp:panel>

    </xp:panel>

    <xp:panel styleClass="lotusFooter">

      <xp:label value="Footer Content Here" id="label2"></xp:label>

    </xp:panel>

  </xp:panel>

</xp:view>

★ スタイルクラス「lotusFrame」を適用するまで―――――
XPageにパネルコントロール、またはdiv要素を配置する。
プロパティタブのスタイルにて、クラス「lotusFrame」を指定する。

まとめ

OneUIの使用を宣言→各タグの属性にクラスを指定するだけで変更が完了する。
今回は幾つかのクラスしか確認しなかったが、他のクラスについて調査していきたい。
また、クラスの使いどころ等もまとめたい。

参考にしたサイトなど

・OneUIの利用: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/OneUI_%E3%81%AE%E5%88%A9%E7%94%A8
・IBM Lotus User Interface Developer Documentation: http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm
・IBM Lotus User Interface Developer Documentation - Version 2.1:
http://infolib.lotus.com/resources/oneui/2.1/docPublic/index.htm

その他

＜調査環境＞
Lotus Domino Designer 8.5.3
Microsoft Internet Explorer 8/Google Chrome 16

この記事は九州地区ノーツパートナー会技術部会(株式会社システムプラネット)によって作成されました。